<template>
  <div class="container-item-archive">
    <template v-for="(temp, index) in list">
      <div v-if="!temp.isDelte" :key="index" class="group-archive" :class="temp.isDelete&&'item-archive-hide'">
        <div class="group-left">
          <div class="item-title">
            <el-tag size="mini" :type="temp.state | paresState('tagType')" style="margin-right:20px">{{ temp.state | paresState }}</el-tag>
            <a href="https://www.baidu.com" target="_black">{{ temp.title || '未填写标题' }}</a>
          </div>
          <div class="item-date-state">{{ new Date(temp.created_at) | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</div>
          <div class="item-other-info">
            <span class="item-icon el-icon-files">资源 {{ temp.resources.length }}</span>
            <span class="item-icon el-icon-chat-line-square">评论 0</span>
            <span class="item-icon el-icon-headset">播放 0</span>
            <span class="item-icon el-icon-star-off">点赞 0</span>
          </div>
        </div>
        <div class="group-right">
          <el-button v-if="temp.isDelete" type="danger" :disabled="true">该合辑已被删除</el-button>
          <template v-else>
            <span :title="temp.state == 1&&'审核中无法编辑'">
              <el-button size="mini" :type="temp.state == 1 ? 'info' : 'primary'" :disabled="temp.state == 1" @click="editArchive(temp)">编辑</el-button>
            </span>
            <el-popover trigger="click" popper-class="group-more" placement="bottom-end" width="320">
              <div class="group-grid">
                <div class="group-grid-row">
                  <div class="item-grid" @click="editArchive(temp)">
                    <i class="item-icon el-icon-edit" />
                    <div>编辑合辑</div>
                  </div>
                  <div class="item-grid">
                    <i class="item-icon el-icon-document" />
                    <div>编辑记录</div>
                  </div>
                  <div class="item-grid">
                    <i class="item-icon el-icon-link" />
                    <div>分享合辑</div>
                  </div>
                  <div class="item-grid">
                    <i class="item-icon el-icon-folder-add" />
                    <div>添加收藏</div>
                  </div>
                </div>
                <div class="group-grid-row">
                  <div class="item-grid">
                    <i class="item-icon el-icon-chat-line-square" />
                    <div>评论管理</div>
                  </div>
                </div>
              </div>
              <div class="item-btn-delete" @click="deleteArchive(temp.id, temp, index)"><i class="el-icon-delete-solid" /> 删除合辑</div>
              <el-button slot="reference" style="margin-left:20px" class="el-icon-more" size="mini" round />
            </el-popover>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// api
import { delArchive } from '@/api/mivawork/audio.js';

export default {
  filters: {
    paresState(state, use = 'text') {
      const arr = [
        { tagType: 'info', text: '编辑中' },
        { tagType: 'warning', text: '审核中' },
        { tagType: 'success', text: '已通过' },
        { tagType: 'danger', text: '未通过' }
      ];
      return arr[state][use];
    }
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      deleteBuffer: []
    };
  },
  methods: {
    async deleteArchive(id, temp, index) {
      this.$emit('animation', true);
      const res = await delArchive({ id });
      this.$message.error(res.message);
      temp.isDelete = true;
      this.deleteBuffer.push(0);
      setTimeout(() => {
        this.deleteBuffer.shift();
        this.deleteHandler();
      }, 1000);
    },
    async deleteHandler() {
      if (this.deleteBuffer.length > 0) {
        // 动画效果保护
        return;
      }
      this.$emit('delete');
      this.$emit('animation', false);
    },
    async editArchive(temp) {
      if (temp.state === 1) {
        this.$message.error('审核中无法编辑 (｀・ω・´)');
        return;
      }
      const id = temp.id;
      this.$router.push({ name: 'audioEdit', params: { id }});
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.container-item-archive {
  .group-archive {
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    .item-title {
      font-size: 18px;
      display: flex;
      align-items: center;
      a{
        transition: color .2s;
        &:hover{
        color: $menuActiveText;
      }
      }
    }
    .item-desc {
      font-size: 12px;
    }
  }
  .item-date-state {
    font-size: 12px;
    color: #99a2aa;
    padding: 20px 0;
  }
  .item-other-info {
    font-size: 12px;
    color: #99a2aa;
    .item-icon {
      margin-right: 20px;
      &::before{
        margin-right: 5px;
      }
    }
  }
  .item-archive-hide {
    transform-origin: center top;
    animation: archiveListHide 1s forwards;
  }
}

@keyframes archiveListHide {
  100% {
    transform: translateX(300px);
    opacity: 0;
  }
}
</style>

<style lang="scss">
.group-more {
  padding: 0;
  border-radius: 30px 0 30px 30px;
  .group-grid {
    border-radius: 30px 0 0;
    overflow: hidden;
  }
  .group-grid-row {
    border-bottom: 1px solid #e5e9ef;
    display: flex;
  }
  .item-btn-delete {
    text-align: center;
    height: 48px;
    line-height: 48px;
    color: #99a2aa;
    cursor: pointer;
    &:hover {
      background-color: #f1f3f7;
    }
  }
  .item-grid {
    width: 25%;
    padding-bottom: 10px;
    text-align: center;
    font-size: 12px;
    color: #99a2aa;
    cursor: pointer;
    .item-icon {
      padding: 20px 0 10px;
      font-size: 18px;
      color: #37c8f7;
    }
    &:hover {
      background-color: #f1f3f7;
    }
  }
}
</style>
